import { genChartByAiAsyncMqUsingPost, testUsingPost } from '@/services/znxs-bi/chartController';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Flex, Form, Input, message, Select, Space, Upload } from 'antd';
import TextArea from 'antd/es/input/TextArea';
import React, { useState } from 'react';

const { Option } = Select;

const AddChartAsync: React.FC = () => {
  const [submitLoading, setSubmitLoading] = useState<boolean>(false);
  const [testLoading, setTestLoading] = useState<boolean>(false);

  // 点击提交按钮
  const onFinish = async (values: any) => {
    // 避免重复提交
    if (submitLoading) {
      return;
    }
    // 加载
    setSubmitLoading(true);
    // 上传的文件位置
    const params = {
      ...values,
      file: undefined,
    };
    // 使用多线程 任务队列
    // const res = await genChartByAiAsyncUsingPost(params, {}, values.file.file.originFileObj);
    // 使用消息队列 rabbitmq
    const res = await genChartByAiAsyncMqUsingPost(params, {}, values.file.file.originFileObj);
    // 处理数据
    if (res.data && res.code === 200) {
      // 分析成功
      message.success('任务提交成功，请到我的图表去查看进度吧');
    } else {
      // 分析失败
      message.error('任务提交失败 ' + res.message);
    }

    // 结束加载
    setSubmitLoading(false);
  };

  const onTest = async () => {
    // 避免重复提交
    if (testLoading) {
      return;
    }
    // 加载
    setTestLoading(true);
    const res = await testUsingPost();
    // 处理数据
    if (res.data && res.code === 200) {
      // 分析成功
      message.success('任务提交成功，请到我的图表去查看进度吧');
    } else {
      // 分析失败
      message.error('任务提交失败 ' + res.message);
    }
    // 结束加载
    setTestLoading(false);
  };

  return (
    <div className="add-chart-async">
      <Form name="AddChartAsync" onFinish={onFinish} initialValues={{}}>
        <Flex justify="space-between">
          <Form.Item
            style={{ width: 300 }}
            name="name"
            label="图表名称"
            rules={[{ required: true, message: '请输入图表名称!' }]}
          >
            <Input placeholder="请输入分析图表名称" />
          </Form.Item>

          <Form.Item
            style={{ width: 400 }}
            name="chartType"
            label="图表类型"
            rules={[{ required: true, message: '请输入图表类型!' }]}
          >
            <Select showSearch placeholder="请输入图表类型">
              <Option svalue="饼图">饼图（大量数据不建议）</Option>
              <Option value="折线图">折线图</Option>
              <Option value="基础平滑折线图">基础平滑折线图</Option>
              <Option value="柱状图">柱状图</Option>
              <Option value="堆叠图">堆叠图</Option>
              <Option value="雷达图">雷达图（大量数据不建议）</Option>
              <Option value="大数据量面积图">大数据量面积图</Option>
              <Option value="时间轴折线图">时间轴折线图</Option>
            </Select>
          </Form.Item>
        </Flex>

        <Form.Item
          name="goal"
          label="分析目标"
          rules={[{ required: true, message: '请输入分析目标!' }]}
        >
          <TextArea rows={1} placeholder="请输入分析预测内容，例如：分析抖音日活增长率" />
        </Form.Item>

        <Flex justify="space-between">
          <Form.Item
            name="file"
            label="数据文件"
            rules={[{ required: true, message: '必须上传文件!' }]}
          >
            <Upload name="file" maxCount={1}>
              <Button icon={<UploadOutlined />}>上传文件</Button>
            </Upload>
          </Form.Item>

          <Form.Item>
            <Space>
              <Button
                type="primary"
                htmlType="submit"
                loading={submitLoading}
                disabled={submitLoading}
              >
                分析
              </Button>

              <Button htmlType="reset">重置</Button>
              <Button ghost type="primary" onClick={onTest}>
                模板测试
              </Button>
            </Space>
          </Form.Item>
        </Flex>
      </Form>
    </div>
  );
};

export default AddChartAsync;
